<!DOCTYPE html>
<%include("inc/html.html"){};%>
    <title>${config.webname!'WE823 CMS'} - 产品展示</title>
    <%include("inc/css.html"){};%>
	<link rel="stylesheet" href="${ctx}/static/assets/lightbox/css/lightbox.css">
	</head>
    <body>
    <div class="container-fluid">
    	<header>
    		<%layout("inc/header.html",{isFirstPage:false}){};%>
    	</header>
    	<div class="container-fluid">
    		<div class="container">
    			<div class="col-md-2">
    				<#cms_product_categories var="product_categories" parentid="0">
					<dl class="left-content" id="product_categories">
						<dt>产品目录</dt>
						<dd id="accordion" class="panel-group">
						<%for(product_category in product_categories){%>
                            <div class="panel panel-info">
                                <div class="panel-heading">
                                     <div class="panel-title">
	                                   <a id="product_${product_category.id!0}" href="#proudct_${product_category.id!0}" data-index="${product_category.id!0}" data-name="${product_category.name!'产品目录'}" data-toggle="collapse" data-parent="#accordion">${product_category.name!'未知'}</a>
	                                 </div>
                                </div>
                                <div class="panel-collapse collapse<%if(product_categoryLP.index==1){print(' in');}%>" id="proudct_${product_category.id!0}">
                                     <div class="panel-body">
                                         <%if(product_category.childs!=null){%>
									<ul>
									<%for(child in product_category.childs!){%>
										<li><a href="javascript:void(0)" data-parent="${child.parent.id!0}" data-id="${child.id!0}" data-name="${child.name!'未知'}">${child.name!'未知'}</a></li>
									<%}%>
									</ul>
									<%}%>
                                     </div>
                                </div>
                            </div>
						<%}%>
						</dd>
					</dl>
					</#cms_product_categories>
    			</div>
    			<div class="col-md-10">
	    			<section class="right-section" >
	    			    <div class="section-header">
	    				    <div class="section-title"></div>
	    				    <div class="section-search">
	    				         <input type="text" id="keyword" placeholder="请输入产品名称或型号" value="${keyword!''}"><button id="search-button"><i class="fa fa-search"></i> 搜索</button>
	    				         <input type="hidden" id="autoSearch" value="${autoSearch!'0'}">
	    				    </div>
	    				</div>
						<div class="section-detail">
							<ul id="product-list">
							</ul>
							<script id="product-template" type="text/html">
								<li>
									<a href="{{imgUrl}}" title="{{title}}" data-lightbox="product">
										<img src="{{imgUrl}}" alt="{{title}}">
									</a>
									<p><a href="product_{{id}}.jspx" target="_blank">{{#title}}</a></p>
								</li>
								</script>
                       </div>
	    			</section>
				</div>
    		</div>
    	</div>
    	<footer>
    		<%include("inc/footer.html"){};%>
    	</footer>
    </div>
            
	<%include("inc/js.html"){};%>
	<script src="${ctx}/static/assets/lightbox/js/lightbox-2.6.min.js"></script>
	<script src="${ctx}/static/assets/jquery/template.js"></script>
	<script src="${ctx}/static/skins/${theme}/js/main.js"></script>
	<script>
		$(document).ready(function(){
			
			$(".left-content").pin({
				containerSelector:'.container',
				minWidth:940
			});
			
			var options={
				category_id:${category_id!0},parent_id:${parent_id!0}
			};
			var title = "${category_name!'产品目录'}";
			CMS.Products.search('product-list');
			var autoSearch = $('#autoSearch').val();
			
			if(autoSearch==1){
				console.log(autoSearch);
                 $('#search-button').click();
			}else{
			    CMS.Products.gets(options,"product-list",title);
			}
			$("#product_categories a").on("click",function(){
				var category_id = $(this).attr("data-id");
				var parent_id = $(this).attr("data-parent");
				var title=$(this).attr("data-name");
				var options = {category_id:category_id,parent_id:parent_id};
				CMS.Products.gets(options,"product-list",title);
			});
			
		});
	</script>
    </body>
 </html>  